# Component: Error

Exception handling and debug information display

Feedback Block

![[Pasted image 20260426083507.png]]

### BEM Anatomy

| Type      | Class Name      | Description                                                             |
| --------- | --------------- | ----------------------------------------------------------------------- |
| ==Block== | `.as-error`     | Main wrapper based on Bootstrap's Danger Alert. Sets standard margins.  |
| Modifier  | `--development` | Contextual modifier indicating an unmasked, technical view.             |
| Modifier  | `--production`  | Contextual modifier for end-user views where technical data is limited. |
| Element   | `__title`       | Bolded primary error heading (e.g., "Error!").                          |
| Element   | `__list`        | The `ListGroup` container for specific error metadata.                  |
| Element   | `__item-label`  | A `<small>` label identifying the type of data (e.g., "Article").       |
| Element   | `__stack-trace` | A `<pre>` element that renders full exception details in dev mode.      |

### Conditional Logic & Spacing

The component forces a vertical separation between the header, the metadata list, and the stack trace via SCSS margin overrides.

##### Generated HTML (Development Mode)

```html
<div class="alert alert-danger as-error as-error--development">
    <div class="as-error__header">
        <strong class="as-error__title">Error!</strong>
    </div>
    <div class="as-error__list list-group">
        <div class="as-error__item list-group-item">
            <small class="as-error__item-label">Error</small>
            <div class="as-error__item-value">NullReferenceException...</div>
            <pre class="as-error__stack-trace">at App.Details.OnInitialized...</pre>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-error {
  margin: 0.5rem; // Half spacer
  
  &__list,
  &__stack-trace {
    // Separation from preceding content
    margin-top: 0.5rem; 
  }

  &__stack-trace {
    // Preformatted text handling
    font-size: 0.8rem;
    overflow-x: auto;
  }
}
```
